.FormContact {
    background-color: rgb(214, 214, 214); /* couleur de fond du formulaire */
    padding: 30px; /* marge du formulaire */
    border-radius: 0px; /* arrondir les bords*/
    position: flex;
    width:100%;
    box-sizing: border-box;
}

.formulaireContact {
    margin-bottom: 30px;
}

.FormContact .groupe1 {
    flex-wrap: wrap;
    flex-direction: column;
}

.Client {
    display: flex;
    flex-direction: row;
}

.CoordonneesClient {
    display: flex;
    flex-direction: row;
}

.VilleCode {
    display: flex;
    flex-direction: row;
}

.ElementForm  {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.ElementForm2 {
    margin-left: 20px;
}

.ElementForm input{
    border:2px solid gray;
    min-height: 20px;
}

.ElementForm select{
    border:2px solid gray;
    min-height: 20px;
}

.ElementForm textarea{
    border:2px solid gray;
    width: 100%;
    min-height:100px;
}

@media (max-width: 500px) {
    form {
        background-color: rgb(214, 214, 214); /* couleur de fond du formulaire */
        padding: 30px; /* marge du formulaire */
        border-radius: 0px; /* arrondir les bords*/
        position: flex;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    
    .formulaire {
        margin-bottom: 30px;
    }
    
    form .groupe1 {
        flex-wrap: wrap;
    }
    
    .Client {
        display: flex;
        flex-wrap: wrap; 
        gap: 10px; 
    }
    
    .CoordonneesClient {
        display: flex;
        flex-wrap: wrap; 
        gap: 10px; 
    }
    
    .VilleCode {
        display: flex;
        flex-wrap: wrap; 
        gap: 10px; 
    }
    
    .ElementForm  {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }
    
    .ElementForm2 {
        margin-left: 0px;
    }
}